<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="60%" :title="drawerTitle">
                <Row>
                <Col>
                    <Card>
                        <Row>
                            <Form ref="form" :model="form" :label-width="90" style="position:relative">
                                <FormItem label="海报上部" prop="sliderImg">
                                    <upload-input :fileUrl="form.xcxHeard.configVal" :fileSize="fileSize" :fileWh="imgSizeUP" @on-change="handleUploadXcxHeard" width="400px" ref="upload"></upload-input>
                                </FormItem>
                                <FormItem label="海报二维码" prop="sliderImg">
                                    <upload-input :fileUrl="form.xcxRight.configVal" :fileSize="fileSize" :fileWh="imgSizeEWM" @on-change="handleUploadXcxRight" width="400px" ref="upload"></upload-input>
                                </FormItem>
                                <FormItem label="海报logo" prop="sliderImg">
                                    <upload-input :fileUrl="form.xcxLeft.configVal" :fileSize="fileSize" :fileWh="imgSizelogo" @on-change="handleUploadXcxLeft" width="400px" ref="upload"></upload-input>
                                </FormItem>

                                <Form-item class="br">
                                    <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                                    <Button @click="handelCancel">取消</Button>
                                </Form-item>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {uploadFile,editPoster,getPoster} from "@/api/index";
    import uploadInput from "@/views/my-components/flyme/upload-input";
    import E from "wangeditor";

    export default {
        name: "share-drawer",
        components: {
            uploadInput
        },
        data() {
            return {
                loading: false, // 表单加载状态
                drawerTitle: "添加课程",
                drawerVisible: false,
                fileSize: 400,
                imgSizeUP: "560*820",
                imgSizeEWM: "88*88",
                imgSizelogo: "108*106",
                form: {
                    xcxHeard: {
                        id: '',
                        configName: '',
                        configVal: ''
                    },
                    xcxRight: {
                        id: '',
                        configName: '',
                        configVal: ''
                    },
                    xcxLeft: {
                        id: '',
                        configName: '',
                        configVal: ''
                    }
                },
                submitLoading: false, // 添加或编辑提交状态
            };
        },
        methods: {
            showDrawer(params) {
                this.imgSize = "750*566";
                this.drawerTitle = "编辑海报图";
                this.getData();
                this.drawerVisible = true;
            },
            getData() {
                this.loading = true;
                getPoster().then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.form = res.data[0];
                    }
                });
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if(!this.form.xcxHeard.configVal){
                        this.$Message.error("请上传海报主图");
                        return
                    }
                    if(!this.form.xcxRight.configVal){
                        this.$Message.error("请上传二维码");
                        return
                    }
                    if(!this.form.xcxLeft.configVal){
                        this.$Message.error("请上传logo");
                        return
                    }
                    if (valid) {
                        this.submitLoading = true;
                        let subForm = [this.form.xcxHeard, this.form.xcxRight, this.form.xcxLeft]
                        // 编辑
                        editPoster({subForm: JSON.stringify(subForm)}).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.$parent.getDataList();
                                this.drawerVisible = false;
                            }
                        });
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            },
            handleUploadXcxHeard(v) {
                this.form.xcxHeard.configVal = v.fileUrl;
            },
            handleUploadXcxRight(v) {
                this.form.xcxRight.configVal = v.fileUrl;
            },
            handleUploadXcxLeft(v) {
                this.form.xcxLeft.configVal = v.fileUrl;
            }
        },
        mounted() {
        },
        watch: {}
    };
</script>